<!-- 对象存储的概况 -->
<template>
  <div v-userAuth="'D20-1'">
    <a-row :gutter="14">
      <!-- 整体区域架构图 -->
      <a-col :span="15">
        <div class="base-card-box fixed-height" style="height:675px;">
          <div class="base-card-title" style="display:inline-block">
            {{$t('Overall-regional-diagram')}}
          </div>
          <div class="area-flag-box">
            <div class="color-box color1"></div><span class="identify-name">{{$t('Area2')}}</span>
            <div class="color-box color2"></div><span class="identify-name">{{$t('Regional-group2')}}</span>
            <div class="color-box color3"></div><span class="identify-name">{{$t('Area')}}</span>
          </div>
          <a-spin :spinning="graphSpinning">
            <AreaStructure
              :graphData="graphData"
              :chartStyle="chartStyle"
            />
            <div v-if="!graphSpinning && Object.keys(graphData).length===0" class="empty-data-box">
              <EmptyData />
            </div>
          </a-spin>
        </div>
      </a-col>
      
      <a-col :span="9">
        <!-- 数据统计信息(当前区域) -->
        <div class="base-card-box fixed-height" style="height:250px">
          <div class="base-card-title">
            {{$t('Data-statistics')}}<span>({{$t('Current-region')}})</span>
          </div>
          <a-row :gutter="14">
            <a-col :span="12" v-for="(item,index) in dataStatistics" :key="index" >
              <div class="data-box">
                <div class="data-item-title">
                  {{$store.state.language=='zh'? item.ch_title : item.en_title}}
                </div>
                <div class="item-value">{{item.value}}</div>
              </div>
            </a-col>
          </a-row>
        </div>

        <!-- 相关服务进程状态(当前区域) -->
        <div class="base-card-box fixed-height2" style="margin-top:14px;height: 410px;">
          <div class="base-card-title">
            {{$t('Process-status')}}<span>({{$t('Current-region')}})</span>
          </div>
          <div class="base-card-table-box">
            <a-table 
              :columns="serviceColumns"
              :loading="serviceTableLoading" 
              :dataSource="serviceData"
              size="small"
              :pagination="false"
              :rowKey='record => record.name+record.hostname' :locale="defaultSetting"
              :scroll="serviceData.length > 6 ? { y: 250 } : {}"
              :rowClassName="(record, i) => i%2 === 1 ? 'table-even-row' : 'table-odd-row' "
              bordered
            >
              <template slot="status" slot-scope="text, record">
                <!-- 异常 -->
                <div v-if="text === 0">
                  <span class="red-circle"></span>{{$t('Abnormal')}}
                </div>
                <!-- 存活 -->
                <div v-else>
                  <span class="green-circle"></span>{{$t('Survive')}}
                </div>
              </template>
            </a-table>
          </div>
        </div>
      </a-col>
    </a-row>

    <!-- <a-row :gutter="25" style="margin-top:20px"> -->
      <!-- 数据同步状态(当前区域) -->
      <!-- <a-col :span="14"> -->
        <!-- <div class="base-card-box fixed-height2">
          <div class="base-card-title">
            {{$t('Data-sync-status')}}<span>({{$t('Current-region')}})</span>
          </div>
          <div class="base-card-table-box">
            <a-table 
              :columns="dataSyncColumns"
              :loading="dataSyncTableLoading" 
              :dataSource="syncStateData"
              size="small"
              :pagination="false"
              rowKey='key' :locale="defaultSetting"
              :scroll="{ y: 190 }"
              :rowClassName="(record, i) => i%2 === 1 ? 'table-even-row' : 'table-odd-row' "
              bordered
            >
              <template slot='numTitle'>
                正在同步的分片数量
                <span :title="$t('Syncing-burst-num')">{{$t('Syncing-burst-num')}}</span>
              </template>
              <template slot='timeTitle'>
                最近同步完成时间
                <span :title="$t('Last-sync-time')">{{$t('Last-sync-time')}}</span>
              </template>
              <template slot="status" slot-scope="text, record">
                异常
                <div>
                  <span class="red-circle"></span>{{$t('Abnormal')}}
                </div>
                正常
                <div>
                  <span class="green-circle"></span>{{$t('Normal')}}
                </div>
              </template>
            </a-table>
          </div>
        </div> -->
      <!-- </a-col> -->

      <!-- 相关服务进程状态(当前区域) -->
      <!-- <a-col :span="10">
        
      </a-col> -->
    <!-- </a-row> -->

  </div>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'
import AreaStructure from '@/components/storage_mgr/object/objset/AreaStructure'

export default {
  name: "ObjectOverview",
  components: { AreaStructure, EmptyData },
  data() {
    return {
      dataStatistics: [
        { ch_title: '用户数量：', en_title: 'Number of users:', value: 0 },
        { ch_title: '桶数量：', en_title: 'Number of barrels:', value: 0 },
        { ch_title: '总对象数量：', en_title: 'Total number of objects:', value: 0 },
        { ch_title: '数据使用量：', en_title: 'Data Usage:', value: 0 },
      ],
      dataSyncTableLoading: false,
      dataSyncColumns: [
        // 区域源
        {title: this.$t('Area-source'), dataIndex:'area', key:'area', ellipsis: true},
        // 状态
        {title: this.$t('Status'), dataIndex:'status', key:'status', ellipsis: true, scopedSlots:{customRender:'status'}},
        // title: '正在同步的分片数量',
        {dataIndex:'num', key:'num',  ellipsis: true, slots: { title: 'numTitle' },},
        // 类型
        {title: this.$t('Type'), dataIndex:'type', key:'type', ellipsis: true},
        // title: '最近同步完成时间',
        {dataIndex:'time', key:'time', ellipsis: true, slots: { title: 'timeTitle' },},
      ],
      syncStateData: [
        {area:'aa'},
        {area:'aa'},
        {area:'aa'},
        {area:'aa'},
        {area:'aa'},
        {area:'aa'},
        {area:'aa'},
        {area:'aa'},
      ],
      serviceTableLoading: false,
      serviceColumns: [
        // '服务名称'
        {title: this.$t('Service-name'), dataIndex:'name', key:'name', ellipsis: true},
        //  主机名
        {title: this.$t('Hostname'), dataIndex:'hostname', key:'hostname', ellipsis: true},
        // 状态
        {title: this.$t('Status'), dataIndex:'status', key:'status', ellipsis: true, scopedSlots:{customRender:'status'}},
      ],
      serviceData: [],
      defaultSetting: {emptyText:<EmptyData />},
      chartStyle: {
        width: '100%',
        // height: 'calc(395px - 40px - 44px)'
        height: 'calc(660px - 40px - 44px)'
      },
      graphData: {
        // id: '1',
        // type: 'center-area',
        // label: '中心主题',
        // width: 90,
        // height: 90,
        // children: [
        //   {
        //     id: '2',
        //     type: 'second-area',
        //     label: '分支主题1',
        //     width: 100,
        //     height: 40,
        //     children: [
        //       {
        //         id: '21',
        //         type: 'area-child',
        //         label: '子主题1',
        //         width: 85,
        //         height: 35,
        //       },
        //       {
        //         id: '1-1-2',
        //         type: 'area-child',
        //         label: '子主题2',
        //         width: 85,
        //         height: 35,
        //       },
        //       {
        //         id: '1-1-3',
        //         type: 'area-child',
        //         label: '子主题3',
        //         width: 85,
        //         height: 35,
        //       },
        //       // {
        //       //   id: '1-1-4',
        //       //   type: 'area-child',
        //       //   label: '子主题4',
        //       //   width: 85,
        //       //   height: 35,
        //       // },
        //       // {
        //       //   id: '1-1-5',
        //       //   type: 'area-child',
        //       //   label: '子主题5',
        //       //   width: 85,
        //       //   height: 35,
        //       // },
        //       // {
        //       //   id: '1-1-6',
        //       //   type: 'area-child',
        //       //   label: '子主题6',
        //       //   width: 85,
        //       //   height: 35,
        //       // },
        //     ],
        //   },
        //   {
        //     id: '1-2',
        //     type: 'second-area',
        //     label: '分支主题2',
        //     width: 100,
        //     height: 40,
        //   },
        // ],
      },
      graphSpinning: false,
    }
  },

  mounted() {
    this.getAreaGraph();
    this.getStatisticsInfo();
    this.getServiceStatus();
  },

  watch: {
    "$store.state.language"(newValue) {
      this.serviceColumns = [
        {title: this.$t('Service-name'), dataIndex:'name', key:'name', ellipsis: true},
        {title: this.$t('Hostname'), dataIndex:'hostname', key:'hostname', ellipsis: true},
        {title: this.$t('Status'), dataIndex:'status', key:'status', ellipsis: true, scopedSlots:{customRender:'status'}},
      ]
      this.getAreaGraph();
    }
  },

  methods: {
    // 获取区域架构图
    async getAreaGraph() {
      this.graphSpinning = true;
      const res = await this.$api.objectOverview.getAreaGraphRequest();
      // console.log('区域架构图', res)
      let id=1;
      let obj = {}
      for(let key in res.data) {
        if(key === 'name') {
          obj.id = id++;
          obj.type = 'center-area';
          obj.label = res.data['name'];
          obj.width = String(res.data['name']).length * 12;
          obj.height = 90;
        }
        if(key === 'zonegroups') { // 是否有区域组
          obj.children = [];
          for(let i of res.data['zonegroups']) {
            if(i.zones) { // 是否有区域
              let arr = [];
              i.zones.forEach(item => {
                let str1 = item.is_master===1? this.$t('Main'):''
                let str2 = i.is_master===1?this.$t('Main'):''
                arr.push({
                  id: id++,
                  type: 'area-child',
                  label: item.name + str1,
                  width: String(item.name + str1).length * 10,
                  height: 35,
                })
                obj.children.push({
                  id: id++,
                  type: 'second-area',
                  label: i.name + str2,
                  width: String(i.name + str2).length * 10,
                  height: 40,
                  children: arr
                })
              })
            }else {
              obj.children.push({
                id: id,
                type: 'second-area',
                label: i.name + i.is_master===1?this.$t('Main'):'',
                width: 100,
                height: 40,
                children: []
              })
            }
          }
        }
      }
      this.graphData = {...obj};
      this.graphSpinning = false;
    },

    // 获取数据统计信息
    async getStatisticsInfo() {
      const res = await this.$api.objectOverview.getStatisticsInfoRequest();
      // console.log('获取数据统计信息', res)
      if(res && res.data) {
        this.dataStatistics[0].value = res.data.user_count; // 用户数量
        this.dataStatistics[1].value = res.data.bucket_count; // 桶数量
        this.dataStatistics[2].value = res.data.object_count; // 总对象数量
        this.dataStatistics[3].value = res.data.usage; // 数据使用量
      }
    },

    // 获取相关服务进程状态
    async getServiceStatus() {
      const res = await this.$api.objectOverview.getServiceStatusRequest();
      // console.log('获取相关服务进程状态', res)
      if(res && res.data) {
        this.serviceData = res.data;
      }
    },
  },
}
</script>
<style scoped>
  .area-flag-box {
    float: right;
  }
  .identify-name {
    vertical-align: text-bottom;
    margin-right: 8px;
  }
  .color-box {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1px solid #999;
    border-radius: 2px;
    margin-right: 1px;
  }
  .color1 {
    background-color: #3c81c3;
  }
  .color2 {
    background-color: #d0e1ef;
  }
  .color3 {
    background-color: #fff;
  }
  .fixed-height {
    height: 395px;
  }
  .fixed-height2 {
    height: 350px;
  }
  /* .data-box2 {
    width: 100%;
    height: 296px;
    overflow: auto;
    background-color: var(--mainGreyColor);
  } */
  .data-box {
    width: 100%;
    height: 70px;
    padding: 10px 15px;
    background-color: #fff;
    margin-bottom: 15px;
  }
  .data-item-box {
    background-color: #fff;
    padding: 13px;
  }
  .data-item-title {
    font-size: 14px;
    color: #666;
  }
  .item-value {
    font-size: 18px;
    color: var(--themeColor);
    font-weight: 700;
  }
  .empty-data-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  /* ::v-deep.base-card-table-box .ant-table-body {
    overflow: auto !important;
  } */
</style>